<template>
  <div class="refuel">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      inline-message
    >
      <el-form-item label="名称">
        <el-input
          v-model="formInline.title"
          placeholder="请输入加油站"
          clearable
        />
      </el-form-item>
      <el-form-item label="评价">
        <el-input
          v-model="formInline.impression"
          placeholder="请输入评价"
          clearable
        />
      </el-form-item>
      <el-form-item label="地区">
        <el-select
          v-model="formInline.position"
          placeholder="请输入地区"
          clearable
        >
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getlist">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dialogVisible = true">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- <Button @click="ssss = !ssss">修改</Button> -->

    <el-card class="box-card" style="width: 100%">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="100%"
        toggleRowExpansion="expanded"
        @cell-click="mapclick"
      >
        <el-table-column prop="_id" label="编号" width="230" />
        <el-table-column prop="title" label="名称" width="200" />
        <el-table-column prop="position" label="地址" width="200">
          <template #default="scope">
            <div>
              {{
                scope.row.position[scope.row.position.length - 2]
                  ? scope.row.position[scope.row.position.length - 2]
                  : ""
              }}
              {{ scope.row.position[scope.row.position.length - 2] ? "-" : "" }}
              {{ scope.row.position[scope.row.position.length - 1] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="welfare" label="福利" width="250" />
        <el-table-column prop="ninetyFivePrice" label="92油价" width="100" />
        <el-table-column prop="ninetyTwoPrice" label="95油价" width="100" />
        <el-table-column label="是否启用" #default="scope" width="150">
          <el-switch
            v-model="scope.row.show"
            class="ml-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
            @change="switchchange(scope.row)"
          />
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="
                edit(scope.row);
                dialogVisible_show = true;
              "
              >查看</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              @click="
                edit(scope.row);
                dialogVisible_edit = true;
              "
              >修改</el-button
            >
            <el-button link type="primary" size="small" @click="del(scope.row)"
              >删除</el-button
            >
            <el-button link type="primary" size="small" @click="mapshows = true"
              >位置</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pagenum"
        v-model:page-size="pagesize"
        :page-sizes="[3, 5, 10, 20]"
        layout="sizes, prev, pager, next"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 添加 -->
    <el-dialog
      v-model="dialogVisible"
      title="添加"
      width="50%"
      @before-close="handleClose"
      draggable
      align-center
    >
      <el-form
        label-width="100px"
        :model="formadd"
        ref="formadd"
        style="max-width: 460px"
      >
        <el-form-item label="加油站名称">
          <el-input v-model="formadd.title" placeholder="请输入加油站" />
        </el-form-item>
        <el-form-item label="地址">
          <el-cascader
            v-model="formadd.position"
            :options="options"
            :props="obj"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="优惠">
          <el-input placeholder="请输入优惠信息" v-model="formadd.welfare" />
        </el-form-item>
        <el-form-item label="92油价">
          <el-input-number v-model="formadd.ninetyTwoPrice" />
        </el-form-item>
        <el-form-item label="95油价">
          <el-input-number v-model="formadd.ninetyFivePrice" />
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:3050/mbw/upload"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="
              form_add();
              dialogVisible = false;
            "
          >
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog
      v-model="dialogVisible_edit"
      title="添加"
      width="60%"
      @before-close="handleClose"
      draggable
      align-center
    >
      <el-form
        label-width="100px"
        :model="show"
        ref="show"
        style="max-width: 460px"
      >
        <el-form-item label="加油站名称">
          <el-input v-model="show.title" placeholder="请输入加油站" />
        </el-form-item>
        <el-form-item label="地址">
          <el-cascader
            v-model="show.position"
            :options="options"
            :props="obj"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="优惠">
          <el-input placeholder="请输入优惠信息" v-model="show.welfare" />
        </el-form-item>
        <el-form-item label="92油价">
          <el-input-number v-model="show.ninetyTwoPrice" />
        </el-form-item>
        <el-form-item label="95油价">
          <el-input-number v-model="show.ninetyFivePrice" />
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:3050/mbw/upload"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible_edit = false">取消</el-button>
          <el-button
            type="primary"
            @click="
              form_edit();
              dialogVisible_edit = false;
            "
          >
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog
      v-model="dialogVisible_show"
      title="添加"
      width="60%"
      @before-close="handleClose"
      draggable
      align-center
    >
      <el-form label-width="100px" :model="show" style="max-width: 460px">
        <el-form-item label="加油站名称">
          <el-input v-model="show.title" placeholder="请输入加油站" />
        </el-form-item>
        <el-form-item label="地址">
          <el-cascader
            v-model="show.position"
            :options="options"
            :props="obj"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="优惠">
          <el-input placeholder="请输入优惠信息" v-model="show.welfare" />
        </el-form-item>
        <el-form-item label="92油价">
          <el-input-number v-model="show.ninetyTwoPrice" />
        </el-form-item>
        <el-form-item label="95油价">
          <el-input-number v-model="show.ninetyFivePrice" />
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:3050/mbw/upload"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>

    <div class="mapshow" v-show="mapshows">
      <div class="map_box">
        <div
          style="float: right; margin-right: 20px; margin-top: 10px"
          class="del"
          @click="mapshows = false"
        >
          <span>x</span>
        </div>
        <div
          id="container"
          style="width: 90%; height: 90%; margin: auto; margin-top: 28px"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { reactive, onMounted, ref } from "vue";
import { ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import map from "./map.vue";
const formInline = reactive({
  title: "",
  impression: "",
  position: "",
});
// let ssss = ref(false);
let mapinp = ref("北京");
let tableData = ref([]);
let pagenum = ref(1);
let pagesize = ref(3);
let total = ref(0);
let dialogVisible = ref(false);
let dialogVisible_edit = ref(false);
let dialogVisible_show = ref(false);
let imageUrl = ref("");
let options = ref([]);
let formadd = reactive({
  title: "",
  pic: "",
  position: [],
  welfare: "",
  ninetyFivePrice: 0,
  ninetyTwoPrice: 0,
  impression: "",
});
let mapshows = ref(false);
let lng = ref(116.4133836971231);
let lat = ref(39.910924547299565);
let obj = {
  children: "city",
  label: "name",
  value: "name",
};
let show = reactive({});
onMounted(() => {
  getlist();
  getcity();
  getmap();
});
let getmap = () => {
  var map = new window.BMapGL.Map("container"); // 创建Map实例
  map.centerAndZoom(mapinp.value, 12); // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
  const myGeo = new BMapGL.Geocoder();
  myGeo.getPoint(mapinp, (point) => {
    if (point) {
      // 地理编码成功，返回经纬度坐标对象
      console.log(point, 111);
      lng.value = point.lng;
      lat.value = point.lat;
      var marker1 = new BMapGL.Marker(new BMapGL.Point(lng.value, lat.value));
      map.addOverlay(marker1);
    }
  });
  var cityControl = new BMapGL.CityListControl({
    anchor: BMAP_ANCHOR_TOP_LEFT,
    // 控件的停靠位置(可选，默认左上角)anchor: BMAP_ANCHOR TOP LEFT// 控件基于停靠位置的偏移量(可选)
    offset: new BMapGL.Size(10, 5),
    // onChangeBefore() {
    //   alert("111");
    // },
    onChangeSuccess(e) {
      lng.value = e.point.lng;
      lat.value = e.point.lat;
      var marker1 = new BMapGL.Marker(new BMapGL.Point(lng.value, lat.value));
      map.addOverlay(marker1);
    },
  });
  map.addControl(cityControl);
};
let getcity = async () => {
  let { data } = await axios.get("http://localhost:3050/mbw/city");
  options.value = data.data;
};
let getlist = async () => {
  let obj = { ...formInline };
  let { data } = await axios.get("http://localhost:3050/mbw/petroleum_list", {
    params: {
      pagenum: pagenum.value,
      pagesize: pagesize.value,
      title: obj.title,
      impression: obj.impression,
      position: obj.position,
    },
  });
  total.value = data.total;
  tableData.value = data.data;
};

let handleSizeChange = (val) => {
  pagesize.value = val;
  getlist();
};
let handleCurrentChange = (val) => {
  pagenum.value = val;
  getlist();
};
let del = (row) => {
  axios.post("http://localhost:3050/mbw/petroleum_del/" + row._id);
  getlist();
};
let handleClose = () => {
  ElMessageBox.confirm("是否取消")
    .then(() => {
      dialogVisible = false;
    })
    .catch(() => {});
};
let switchchange = (row) => {
  axios.post("http://localhost:3050/mbw/petroleum_edit/" + row._id, { ...row });
};
let handleAvatarSuccess = (val) => {
  imageUrl.value = val.img;
};
let form_add = () => {
  if (formadd.title) {
    formadd.impression = "";
    formadd.pic = imageUrl.value;
    axios.post("http://localhost:3050/mbw/petroleum_add", formadd);
  } else {
    alert("请填写标题");
  }
  this.$refs["formadd"].resetFields();
  console.log(formadd);
};
let edit = (row) => {
  show = { ...row };
  imageUrl = row.pic;
};
let form_edit = () => {
  console.log(show);
  if (show.title) {
    formadd.impression = "";
    formadd.pic = imageUrl.value;
    axios.post("http://localhost:3050/mbw/petroleum_edit/" + show._id, show);
  } else {
    alert("请填写标题");
  }
};
let mapclick = (row) => {
  console.log(row);
  mapinp.value = row.position[row.position.length - 1];
  getmap();
};
</script>

<style scoped>
body,
html,
#app,
.refuel {
  width: 100%;
  height: 100%;
}

.el-form {
  margin-top: 10px;
  width: 100%;
}
.box-card {
  margin-top: 20px;
}
.el-form {
  margin: auto;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.el-overlay,
.el-overlay-dialog,
.el-dialog,
.el-dialog__body {
  width: 500px;
  height: 300px;
}
#container {
  /* overflow: hidden; */
  width: 100%;
  height: 50%;
}
.mapshow {
  width: 90%;
  height: 100%;
  background: rgba(22, 21, 21, 0.116);
  position: absolute;
  top: 80px;
  left: 220px;
}
.map_box {
  width: 50%;
  height: 50%;
  background: white;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}
.del:hover {
  cursor: pointer;
}
</style>
